<template>
  <div class="msg-content"
       @mouseenter="handleMouseEnter"
       @mouseleave="handleMouseLeave">
    <el-badge is-dot class="msg-content-item">
      <el-button class="share-button">
        <!-- 默认显示白色铃铛 -->
        <svg-icon v-show="!isHover" icon-class="bell" />
        <!-- 悬停时显示红色铃铛 -->
        <svg-icon v-show="isHover" icon-class="bell00d4ff" />
      </el-button>
    </el-badge>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isHover: false
    }
  },
  methods: {
    handleMouseEnter() {
      this.isHover = true
    },
    handleMouseLeave() {
      this.isHover = false
    }
  }
}
</script>

<style lang="scss">
.msg-content {
  position: relative;
  margin-top: 2px;
  margin-right: 10px;
  
  .svg-icon {
    font-size: 22px;
  }
  
  .el-badge__content.is-fixed {
    top: 8px;
  }
  
  .el-badge__content {
    border: none;
  }
  
  .msg-content-item {
    .el-button--medium {
      padding: 8px;
      background: transparent;
      text-shadow: 0 0 8px rgba(0, 212, 255, 0.4);
      border: none;
    }
  }
}

.msg-content:hover .msg-content-item {
  .el-button--medium {
    padding: 8px;
    background: rgba(255, 255, 255, 0.05);
    text-shadow: 0 0 8px rgba(0, 212, 255, 0.4);
    border: none;
  }
}
</style>